<template>
	<uni-popup ref="popup" type="bottom" :mask-click="true">
		<!-- 宽度为80% -->
		<view class="zy-bg-white-rt30" style="width: 100%;">
			<view class="zy-column-center-v zy-bg-white-r30 zy-ph">
				<!-- item -->
				<view class="zy-row-wrap zy-mt-lg" style="width: 100%;">
					<view style="width: 33%; padding: 10rpx;">
						<view class="zy-bg-orange-gradient-rt30 zy-p"></view>
						<view class="zy-column-center-v zy-bg-yellow-light-rb30 zy-ph border-main">
							<view class="zy-text-gray-smz zy-mt">30days</view>
							<zy-price class="zy-mt" size="lg" color="red" price="360"></zy-price>
							<view class="zy-row-center zy-text-black-sm zy-font-bold zy-mt price-bg" style="width: 100%;">₱360/30d</view>
							<view class="zy-text-gray-sm zy-font-bold zy-mt zy-mb-lg">Inventory:321</view>
						</view>
					</view>
					<view style="width: 33%; padding: 10rpx;">
						<view class="zy-bg-orange-gradient-rt30 zy-p"></view>
						<view class="zy-column-center-v zy-bg-yellow-light-rb30 zy-ph border-gray">
							<view class="zy-text-gray-smz zy-mt">60days</view>
							<zy-price class="zy-mt" size="lg" color="red" price="864"></zy-price>
							<view class="zy-row-center zy-text-black-sm zy-font-bold zy-mt price-bg" style="width: 100%;">₱360/30d</view>
							<view class="zy-text-gray-sm zy-font-bold zy-mt zy-mb-lg">Inventory:1653</view>
						</view>
					</view>
					<view style="width: 33%; padding: 10rpx;">
						<view class="zy-bg-orange-gradient-rt30 zy-p"></view>
						<view class="zy-column-center-v zy-bg-yellow-light-rb30 zy-ph border-gray">
							<view class="zy-text-gray-smz zy-mt">90days</view>
							<zy-price class="zy-mt" size="lg" color="red" price="3,024"></zy-price>
							<view class="zy-row-center zy-text-black-sm zy-font-bold zy-mt price-bg" style="width: 100%;">₱252/30d</view>
							<view class="zy-text-gray-sm zy-font-bold zy-mt zy-mb-lg">Inventory:2215</view>
						</view>
					</view>
				</view>
				<!-- tip -->
				<view class="zy-row-center zy-text-gray zy-mt-lg">
					<view class="zy-ml-sm">Current SVIP Staus:</view>
					<view class="zy-text-main zy-ml-sm">Activater,30 days remaining</view>
				</view>
				<view class="zy-row-center zy-text-gray">
					<view class="zy-ml-sm">Vaild after purchase until: </view>
					<view class="zy-text-main zy-ml-sm">24/03/2024 0:00</view>
				</view>
				<!-- 按钮 -->
				<zy-button  class="zy-mt-50 zy-mb-lg" content="Purchase 30 days" style="width: 90%;"  @click="onClick"></zy-button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name:"popup-buy-vip",
		data() {
			return {
				
			};
		},
		methods:{
			open() {
				this.$refs.popup.open()
			},
			onClick(){
				this.$emit('ok')
			}
		}
	}
</script>

<style lang="scss">
	.price-bg{
		background: #FFFFFF;
		border-radius: 22rpx;
		border: 2rpx solid #C4C4C4;
		padding: 5rpx 0;
	}
	
	.border-main{
		// border-top: 2px solid $zy-color-main;
		border-bottom: 1px solid $zy-color-main;
		border-left: 1px solid $zy-color-main;
		border-right: 1px solid $zy-color-main;
	}
	.border-gray{
		// border: 2px solid $zy-color-gray-base;
		border-bottom: 1px solid $zy-color-gray-base;
		border-left: 1px solid $zy-color-gray-base;
		border-right: 1px solid $zy-color-gray-base;
	}

</style>